<template>
  <div class="dashboard-container">

    <!-- :before-close="handleClose" -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>
        <img class="introduction" src="https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png" alt="">
      </span>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>

    <template>
      <el-skeleton />
    </template>
    <el-row class="" :gutter="20">
      <el-col :span="14">
        <div class="colPadding grid-content bg-purple hRow">
          <p class="colP">机构概述</p>
          <div class="leftBox">
            <h4>西三分期中心</h4>
            <p>地址：地址地址地址</p>
            <div>负责人：王佳杰123122312</div>
            <el-button class="btn" type="primary" @click="dialogVisible = true">查看营业部分布</el-button>
          </div>
          <div class="rightBox">
            <div>
              <div>
                <p>分拣中心(个)</p>
                <h2>1</h2>
              </div>
            </div>
            <div>
              <div>
                <p>营业部(个)</p>
                <h2>4</h2>
              </div>
            </div>
            <div>
              <div>
                <p>司机个数(个)</p>
                <h2>48</h2>
              </div>
            </div>
            <div>
              <div>
                <p>快递员人数(个)</p>
                <h2>64</h2>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="colPadding grid-content bg-purple hRow">
          <div class="header">
            <span class="colP">今日数据</span>
            <span class="time"><i class="el-icon-refresh" />2023-02-11 xx-xx-xx</span>
          </div>
          <div class="bottom">
            <span>
              <div>订单金额(元)</div>
              <h2>2284</h2>
              <p>较昨日 +12</p>
            </span>
            <span>
              <div>订单数量(笔)</div>
              <h2>1232</h2>
              <p>较昨日 +12</p>
            </span>
            <span>
              <div>运输任务(次)</div>
              <h2>346</h2>
              <p>较昨日 +12</p>
            </span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="14">
        <div class="grid-content bg-purple hRowTow colPadding">
          <div class="header">
            <span class="colP">代办任务</span>
            <span class="time"><i class="el-icon-refresh" />2023-02-11 xx-xx-xx</span>
          </div>
          <!-- 球 -->
          <div ref="box" style="width:920px; height:220px" />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple hRowTow colPadding">
          <div class="header">
            <span class="colP">执行中任务</span>
            <span class="time"><i class="el-icon-refresh" />2023-02-11 xx-xx-xx</span>
          </div>
          <ball />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple hRowThree colPadding">
          <div class="header">
            <p class="colP">常用功能</p>
          </div>
          <div class="Listmenu">
            <span>
              <i class="el-icon-receiving" />
              <p>快递作业</p>
            </span>
            <span>
              <i class="el-icon-truck" />
              <p>运输任务</p>
            </span>
            <span>
              <i class="el-icon-guide" />
              <p>线路管理</p>
            </span>
            <span>
              <i class="el-icon-truck" />
              <p>车辆管理</p>
            </span>
            <span>
              <i class="el-icon-user" />
              <p>司机管理</p>
            </span>
            <span>
              <i class="el-icon-notebook-1" />
              <p>运费查询</p>
            </span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple hRowFour colPadding">
          <div class="header">
            <p class="colP">线路管理</p>
          </div>
          <div class="colC">
            <china-cap class="china" />
            <div />
          </div></div></el-col>
      <el-col :span="12">
        <div class="grid-content mode bg-purple hRowFour colPadding">
          <div class="header">
            <span class="colP">运输任务</span>
            <span class="time">
              查看更多
              <i class="el-icon-arrow-right gren" />
            </span>
          </div>
          <div class="main">
            <template>
              <el-table
                class="mainTable"
                height="100%"
                :data="tableData"
                max-height="400px"
                style="width: 100%; height: 100%"
              >
                <el-table-column
                  prop="date"
                  label="任务编号"
                  width="155"
                />
                <el-table-column
                  prop="name"
                  label="起始地"
                  width="155"
                />
                <el-table-column
                  prop="address"
                  label="目的地"
                  width="150"
                />
                <el-table-column
                  prop="address"
                  label="车辆"
                  width="150"
                />
                <el-table-column
                  prop="address"
                  label="任务状态"
                  width="150"
                />
              </el-table>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content orderForm bg-purple hRowFive colPadding">
          <div class="header">
            <span class="colP">订单总笔</span>
            <span class="time">
              2023-02-11 xx-xx-xx
            </span>
          </div>
          <p>单位: 笔</p>
          <div class="data">
            <span>
              <h3>74,432</h3>
              <p>订单最高值</p>
            </span>
            <span>
              <h3>12,244</h3>
              <p>订单平均值</p>
            </span>
            <span>
              <h3>30,510</h3>
              <p>订单最低值</p>
            </span>
          </div>
          <div class="lineList">
            <!-- <curve-data /> -->
            <line-totol />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple hRowFive colPadding">
          <div class="header">
            <span class="colP">订单分布</span>
            <span class="time">
              2023-02-11 xx-xx-xx
            </span>
          </div>
          <div class="distribution">
            <curve-data />
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Ball from '@/components/Ball'
// import HeadForm from '@/components/HeadForm'
import * as echarts from 'echarts'
import ChinaCap from './china/china-cap.vue'
import CurveData from './curve/CurveData.vue'
import LineTotol from './line/LineTotol.vue'
export default {
  name: 'Dashboard',
  components: {
    // HeadForm
    Ball,
    ChinaCap,
    CurveData,
    LineTotol
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀江路'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市金沙江'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海陀区金'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: ' 1516 弄'
      }
      ]
    }
  },
  async created() {
    await this.$store.dispatch('user/fetchData')
  },
  mounted() {
    const myChart = echarts.init(this.$refs.box)
    var option = {
      title: [
        // 第一个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16',
            fontWeight: '700'
          },
          subtext: '待取件 39',
          left: '9%',
          top: '82%',
          textAlign: 'center'
        },
        // 第二个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16',
            fontWeight: '700'
          },
          subtext: '待派件 18',
          left: '35%',
          top: '82%',
          textAlign: 'center'
        },
        // 第三个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16',
            fontWeight: '700'
          },
          subtext: '未分配运输 4',
          left: '60%',
          top: '82%',
          textAlign: 'center'
        },
        // 第四个球
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16',
            fontWeight: '700'
          },
          subtext: '运输超时 5',
          left: '85%',
          top: '82%',
          textAlign: 'center'
        }
      ],
      series: [
        // 第一个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['10%', '50%'],
          data: [0.42],
          itemStyle: {
            color: '#e35d3e',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 1,
              borderColor: '#e67961'
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第三个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['60%', '50%'],
          data: [0.29],
          itemStyle: {
            // 水颜色
            color: '#ff9b41',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fea6564'
            }
          },
          backgroundStyle: {
            color: '#ffead7'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第二个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['35%', '50%'],
          data: [0.31],
          itemStyle: {
            color: '#ffc45e',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: 'red',
            itemStyle: {
              borderWidth: 1,
              // 边框线颜色
              borderColor: '#fece7a'
            }
          },
          backgroundStyle: {
            color: '#fff1d9'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第四个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['85%', '50%'],
          data: [0.41],
          itemStyle: {
            color: '#edde83',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 1,
              borderColor: '#f2e9b2'
            }
          },
          backgroundStyle: {
            color: '#fafade'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        }
      ]

    }
    myChart.setOption(option)
  },
  methods: {
    // handleClose(done) {

    // }
  }
}
</script>

<style lang="scss" scoped>
// 居中图片
.introduction{
  position: fixed;
  margin-top: -100px;
  margin-left: -100px;
  // z-index: 99;
  width: 800px;
  height: 600px;
}
// 订单
.orderForm{
  p{
    color:#818693;
    font-size: 14px;
    margin: 0 0 14px;
  }
  .data{
    display: flex;
    justify-content:space-evenly;
    margin-top: 38px;
    span{
      text-align: center;
      h3{
        color: #e15536;
        font-size: 28px;
        margin: 0 0 5px;
      }
      p{
        font-size: 12px;
        color: #818693;
      }
    }
  }
}
*{
  margin: 0;
  padding: 0;
}
.dashboard-container{
  // 自己加的
  // margin-top: 70px !important;
  // float: right;
  background-color: #f3f5f9;
  // width: 1650px;
  .colPadding{
    padding: 23px 20px;
    .colP{
      margin: 0 0 16px 0;
      font-size: 16px;
      font-weight: 700;
    }
    .leftBox{
      float: left;
      width: 460px;
      height: 155px;
      padding-left: 10px;
      border-right: 0.5px solid #ebeef5 ;
      h4{
        margin: 20px 0 13px;
        font-weight: 400;
        font-size: 16px;
        color:#303133
      }
      p{
        margin-bottom: 8px;
        font-size: 14px;
        color: #818693;
      }
      div{
        margin-bottom: 23px;
        font-size: 14px;
        color: #818693;
      }
      .btn{
        width: 158px;
        height: 40px;
        color:#e15536;
        border: 1px solid #f3917c;
        background-color: #ffeeeb;
        border-radius: 4px;
      }
      .btn:hover{
          background-color: #ff6b4a;
          color:#fff;
        }
    }
    .rightBox{
      float: right;
      width: 430px;
      div{
        float: left;
        margin-right: 5px;
        margin-left: 10px;
        width: 155px;
        height: 85px;
        div{
          width: 100px;
          margin-left: 50px;
          p{
            font-size: 14px;
            margin-bottom: 10px;
          }
          h2{
            font-size: 32px;
            font-weight: 700;
            color: #e15536;

          }
        }
      }
    }
  }
  .Listmenu{
    width: 100%;
    height: 116px;
    display: flex;
    justify-content: space-around;
    span{
      border-radius: 10px;
      height: 116px;
      width: 245px;
      background-color: #fafafb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      cursor:pointer;
      i{
        font-size: 40px;
        color: #e15536;
      }
      p{
        margin: 16px 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
      }
    }
    span:hover{
      p{
        color: #e15536;
      }
    }
  }
}
.header{
  height: 35px;
  display: flex;
  justify-content: space-between;
  .time{
    font-size: 14px;
    color: #818693;
    cursor:pointer;
    i{
      font-weight: 700;
      margin-right: 8px;
      font-size: 16px;
      color: #e15536;
    }
    .gren{
      color: #818693;
    }
  }
}
.bottom{
  span{
    display: inline-block;
    width: 209px;
    height: 140px;
    text-align: center;
    div{
      font-size: 14px;
      color: #20232a;
      margin-bottom: 21px;
    }
    h2{
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
      margin-bottom: 24px;
    }
    p{
      height: 1px;
      font-size: 14px;
      color: #818693;
      margin-bottom: 20px;
    }
  }
}
// .china{
//   height: 700px !important;
//   background-color: pink;
// }
.colC {
  width: 100%;
  height: 90%;
}
// 运输任务
.mode{
  .main{
    .mainTable{
      border: 1px solid #ebeef5;
      margin-left: 10px !important;
    }
  }
}
//123123123
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ddd;
  }
  // 手写
  .hRow{
    height: 235px;
  }
  .hRowTow{
    height: 290px;
  }
  .hRowThree{
    height: 190px;
  }
  .hRowFour{
    height: 480px;
  }
  .hRowFive{
    height: 580px;
  }
</style>
